import React from 'react';
import { observer } from 'mobx-react';
import TemplateManageStore from '../../stores/list/TemplateManageStore';
import { WeaFormItem, WeaDialog, WeaLocaleProvider } from 'ecCom';
import { WeaSwitch } from 'comsMobx';
import { Button } from 'antd';
const getLabel = WeaLocaleProvider.getLabel;

export interface EidtTemplateProps {
    templateManageStore: TemplateManageStore
}
@observer
export default class EidtTemplate extends React.Component<EidtTemplateProps, any> {
    render() {
        const { templateManageStore } = this.props;
        let formParams = templateManageStore.form.getFormParams();
        return (
            <div >
                {
                    templateManageStore.fields.map(d => {
                        return (<div className="wea-search-group" style={d.hide ? { display: 'none' } : {}}>
                            <WeaFormItem
                                label={d.label}
                                labelCol={{ span: d.labelcol }}
                                wrapperCol={{ span: d.fieldcol }}
                                error={templateManageStore.form.getError(d)}
                                tipPosition="bottom"
                            >
                                <WeaSwitch fieldConfig={d} form={templateManageStore.form} formParams={formParams}  />
                            </WeaFormItem></div>
                        )
                    })
                }
            </div >
        )
    }
}

@observer
export class EidtTemplateDialog extends React.Component<EidtTemplateProps, any>{
    render() {
        const { templateManageStore } = this.props; 
        const { iconInfo } = templateManageStore;
        const buttons = [<Button onClick={() => { templateManageStore.visible = false }}>{getLabel(309, "关闭")}</Button>,
        <Button type="primary" loading={templateManageStore.loading} onClick={() => { templateManageStore.save() }}>{getLabel(86, '保存')}</Button>]
        return (
            <WeaDialog
                className='wea-auth-modal cube-dialog'
                buttons={buttons}
                title={templateManageStore.form.getFormParams().id ? getLabel(16449, '编辑模板') : getLabel(16388, '新建模板')}
                iconBgcolor={iconInfo.iconBg || "#96358a"}
                icon={iconInfo.icon || 'icon-coms-ModelingEngine'}
                iconFontColor={iconInfo.iconColor || "#fff"}
                visible={templateManageStore.visible}
                style={{ width: 520, height: 260 }}
                hasScroll={true}
                onCancel={() => { templateManageStore.visible = false }}
            >
                <EidtTemplate templateManageStore={templateManageStore} />
            </WeaDialog >
        )
    }
}